/**
 * @author ciwyaitd
 * @date   16/1/11
 * @description []
 */
import DetailInfo from "../components/detail/ImgTextDetail";
import MaskLayout from "../components/detail/MaskLayout";
import LargeImg from "../components/LargeImg";

const lf = liefeng,
	r = React;

var RC = r.createClass,
	getUrlParam = lf.utils.getUrlParam,
	ajax = lf.utils.ajax,
	getUser = lf.bridgeJs.getUser,
	appAlert = lf.bridgeJs.alert,
	log = lf.utils.log;

var tableTitList = [
		[ 'content', '任务描述'],
		["location","服务地点"],
		[ 'reporterName', ' 联 系 人 '],
		[ 'phone', '联系电话'],
		[ 'reportTime', '报事时间'],
		[ 'orderTime', '预约时间']
	],
	flag = getUrlParam('flag'),
	orderId = getUrlParam('orderId'),
	taskId = getUrlParam('taskId');

// 抢单弹出层
var RushStatus = RC({
	componentDidMount: function () {
		r.findDOMNode(this.refs.rushLayout).addEventListener('tap', function (e) {
			this.props.cancelHandler();
		}.bind(this), !1)

		r.findDOMNode(this.refs.rushLayoutCon).addEventListener('tap', function (e) {
			e.stopPropagation();
		}, !1);
	},
	render: function () {
		return (
			<section className={"rush-alert-layout alert-layout " + this.props.visible}>
				<MaskLayout displayNone={this.props.cancelHandler} />
				<div ref="rushLayout" onTouchMove={this._touchMoveHandler} className={"animated bounceIn " + this.props.status}>
					<div ref="rushLayoutCon" className="alert-layout-main">
						<div className="rush-alert-con"><div className="rush-alert-con-bg"></div></div>
						<div className="rush-alert-btn">
							<a onTouchStart={this._confirmHandler} href="javascript:">确定</a>
						</div>
						<p className="rush-alert-bot-tip">哎呀,差一点点</p>
					</div>
				</div>
			</section>
		)
	},

	_cancelHandler: function () {
		//<a onTouchStart={this._cancelHandler} href="javascript:">稍后处理</a>
		//doLocation('rush.html', '任务抢单');
	},
	_confirmHandler: function () {
		//doLocation('task-processing-detail.html?orderId='+orderId, '工单处理');
		lf.appJs.doClose();
	},
	_touchMoveHandler: function (e) {
		e.preventDefault();
	}
});

// 底部按钮
var BtnDetail = RC({
	getInitialState: function () {
		return {
			aClass: '',
			aText: ''
		}
	},
	componentWillMount: function () {
		var btn_flag = flag || 'sign',
			a_class = btn_flag == 'sign' ? 'sign-detail-btn ' : 'animated pulse infinite rush-detail-btn',
			a_text = btn_flag == 'sign' ? '签收' : '抢';
		this.setState({
			aClass: a_class,
			aText: a_text
		})
	},
	render: function () {
		return (
			<footer className={'footer-btn-container ' + this.props.visible}>
				<a onTouchStart={this._btnHandler} className={this.state.aClass}
				   href="javascript:">{this.state.aText}</a>
			</footer>
		)
	},

	_btnHandler: function (e) {
		var me = this,
			page = 'rush.html',
			title = '抢单';
		if(flag == 'sign'){
			page = 'sign-for.html';
			title = '签收';
		}

		ajax({
			type: 'POST',
			data: {
				wfTaskId: taskId,
				staffid: liefeng.userInfo.id,
			},
			success: function (data) {
				//typeof(data) == 'string' ? data = JSON.parse(data) : data;
				if (flag == 'sign') {
					if (data.code == '200') {

						//appConfirm({
						//	content: '签收成功!',
						//	yesText: '立即处理',
						//	noText: '稍后处理',
						//	yesFn: 'signConfirm',
						//	noFn: 'signCancel'
						//});
						//registerHandler({
						//	signConfirm: function () {
						//		//doAction('task_processing_detail.html?wid='+wid + '&loginid='+me.props.userInfo.loginid + '&ordercode=' + ordercode, '工单处理');
						//		doLocation('task-processing-detail.html?orderId=' + orderId, '工单处理');
						//	},
						//	signCancel: function () {
						//		doLocation('sign-for.html', '任务签收');
						//	}
						//});
						appAlert('签收成功', () => lf.appJs.doClose());
					}
					else {
						appAlert('没有签收的工单，可能已被上一办理人撤回。', function () {
							me.props.cancelHandler();
						});
					}
				}
				else {
					var success_flag = data.code == '200';
					me.props.btnHandler(success_flag);
				}
			}
		}, lf.api.doRush)
	}
});

// 整个组件
var RushDetail = RC({
	getInitialState: function () {
		return {
			alertVisible: '', // 抢单结果层的显示
			btnVisible: '', // 按钮的显示
			status: '', // 抢单状态
			dt: {}, // 整个数据
			imgSrc: '', // 图片放大的src
			largeImgVisible: '' // 图片放大层的显示
		}
	},
	componentWillMount: function () {
		ajax({
			data: {
				orderId: orderId,
				staffId: liefeng.userInfo.id,
			}
		}, lf.api.task.detail , function callback ( data ) {
			this.setState({
				dt: data
			});
			var foot_btn = $('.footer-btn-container');
			if ( $('#root').height() > foot_btn.offset().top - 15 ) {
				foot_btn.css({'position':'static','margin':'0.15rem'});
			}
		}.bind(this))
	},
	render: function () {
		return (
			<div>
				<DetailInfo data={this.state.dt}
							tableTitList={tableTitList}
							title={this.props.title}
							enlargeHandler={this._enlargeHandler}/>
				<BtnDetail visible={this.state.btnVisible}
						   userInfo={this.props.userInfo}
						   btnHandler={this._rushHandler}
						   cancelHandler={this._cancelHandler}/>
				<RushStatus visible={this.state.alertVisible}
							userInfo={this.props.userInfo}
							status={this.state.status}
							cancelHandler={this._cancelHandler}/>
				<LargeImg imgSrc={this.state.imgSrc}
						  hideHandler={this._hideHandler}
						  visible={this.state.largeImgVisible}/>
			</div>
		)
	},

	_rushHandler: function ( rushFlag ) {
		var status = ['rush-success', 'rush-fail'];

		this.setState({
			alertVisible: 'this',
			status: rushFlag ? status[0] : status[1]
		});
	},
	_cancelHandler: function () {
		this.setState({
			alertVisible: '',
			btnVisible: 'ele-hide'
		});
	},
	_enlargeHandler: function ( imgSrc ) {
		this.setState({
			imgSrc: imgSrc,
			largeImgVisible: 'this'
		});
	},
	_hideHandler: function () {
		this.setState({
			largeImgVisible: ''
		});
	}
});

getUser( function ( userInfo ) {
	if(flag == 'sign'){
		lf.bridgeJs.setTitle('签收详情')
	}else{
		lf.bridgeJs.setTitle('抢单详情')
	}

	r.render(
		<RushDetail
			userInfo={userInfo}
			title="工单信息" />,
		document.getElementById('root')
	)
});
